<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>FileReader</title>
</head>

<body>
    <div>
        输入匹配的内容：<input id="search" />
        <input type="file" name="file" id="files" onchange="choosefile()" />
        <button onclick="handleMatch()">再次匹配</button>
        <button onclick="handleExport()">导出</button>
        <div id="name"></div>
        <textarea id="text" cols="100" rows="50"></textarea>
    </div>
    <script type="text/javascript">
        var result = '';
        var resCount = 0;
        var content = '';
        var searchVar = '';
        var fileName = null;

        function choosefile() {
            result = '';
            resCount = 0;
            content = '';
            // 1. 检查输入框
            searchStr = document.getElementById('search').value;
            if (searchStr == null || searchStr == "") {
                alert("请先输入要匹配的内容");
                clearFileInput();
                return;
            }
            // 2. 处理数据
            var fileList = document.getElementById('files').files;

            if (fileList.length > 0 && fileList[0] != null) {
                fileName = fileList[0].name;
                var reader = new FileReader();
                reader.readAsText(fileList[0], "UTF-8");
                reader.onload = function (e) {
                    content = e.target.result;
                    handleMatch(); // 留下包含searchStr的那一行
                }
            }
            // document.getElementById('name').innerHTML = fileName;
        }

        function handleMatch() {
            result = '';
            resCount = 0;
            searchStr = document.getElementById('search').value;
            var contentArray = content.split(/[(\r\n)\r\n]+/);
            contentArray.forEach(element => {
                if (element.includes(searchStr)) {
                    resCount++;
                    result += element + "\n";
                }
            });
            document.getElementById('text').value = result;
            document.getElementById('name').innerHTML = "匹配的结果数量：" + resCount;
        }

        function handleExport() {
            if (result == '') {
                alert("处理结果为空");
                return;
            }
            var link = document.createElement("a");
            link.target = "_blank";
            link.download = fileName;
            link.rel = "noopener";
            var blob = new Blob([result], { type: "text/plain;charset=utf-8" })
            link.href = URL.createObjectURL(blob);
            setTimeout(function () { URL.revokeObjectURL(link.href) }, 4E4) // 40s
            setTimeout(function () { link.click(); }, 0);
        }

        function clearFileInput() {
            var oldInput = document.getElementById("files");
            var newInput = document.createElement("input");
            newInput.type = "file";
            newInput.id = oldInput.id;
            newInput.name = oldInput.name;
            newInput.multiple = oldInput.multiple;
            newInput.onchange = oldInput.onchange;
            // 复制其它相关属性
            oldInput.parentNode.replaceChild(newInput, oldInput);
        }

    </script>
</body>

</html>